import React, { useState, useEffect,Suspense } from 'react';
import "@/views/Index/Home/Home.scss"
import { CodepenOutlined, HomeOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Outlet } from 'react-router-dom';
const { Header, Content, Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];
interface Props {

}

function AssetManagement(props: Props) {
  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
    } as MenuItem;
  }
  const items2: MenuItem[] = [
    getItem('资产管理', 'sub1', <CodepenOutlined />, 
    [
      getItem('资产列表', '/index/assets/assetmanagement/list'),
      getItem('资产类别', '/index/assets/assetmanagement/kind'), 
      getItem('仓库管理', '/index/assets/assetmanagement/manage'),
      getItem('资产盘点', '/index/assets/assetmanagement/assetInventory'),
    ]),
      getItem('库存管理', 'sub2', <HomeOutlined />, 
    [getItem('采购单', '/index/assets/inventorymanagement/purchaseorder')]),
      getItem('设置', 'sub3', <SettingOutlined />),
  ]

  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <div className='assetmanagement'>
      <Content
        style={{
          padding: 24,
          margin: 0,
          minHeight: 280,
          background: colorBgContainer,
        }}
      >
         <Suspense fallback={<div className='loading'><img src="https://hbimg.b0.upaiyun.com/42c725b3935a1ce3e32897b9995c1b6a2e921d335690-Ck6vZO_fw658" alt="" /></div>}>
        <Outlet />
        </Suspense>
      </Content>

    </div>
  );
}

export default AssetManagement;